<template>
  <div class="classes">
    <el-row>
      <!-- 筛选 -->
      <el-col :span="24">
        <el-form ref="queryFormRef" :model="queryForm" inline size="mini">
          <el-form-item label="班级名称" prop="className">
            <el-input v-model="queryForm.className"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="info" @click="rest">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 添加 -->
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialog.visible = true">添加班级</el-button>

        <!-- 表格 -->
        <el-table :data="classList" style="width: 100%">
          <el-table-column type="index" label="#" width="50" align="center">
          </el-table-column>
          <el-table-column prop="className" label="班级名称" align="center">
          </el-table-column>
          <el-table-column prop="stuCount" label="班级人数" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template #default="{ row }">
              <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 10px;">
          <el-pagination layout="prev, pager, next" :total="paginate.total"
            :page-size.sync="paginate.pageSize" :current-page.sync="paginate.pageNum"
            @current-change="handleCurrentPage">
          </el-pagination>
        </el-row>
      </el-col>


      <!-- 弹窗（添加/编辑班级） -->
      <el-dialog :visible.sync="dialog.visible" :title="dialog.isEdit ? '编辑班级' : '添加班级'" width="25%">
        <el-form :model="dialog.form" ref="dialogFormRef" label-position="top" size="small">
          <el-form-item label="班级名称" prop="className">
            <el-input v-model="dialog.form.className"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialog.visible = false">取消</el-button>
            <el-button type="primary" @click="handleSave">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { listClass, addClass, editClass, delClass } from '@/api/classes';
import { checkQueryInput, restForm } from '@/utils/tools.js';

export default {
  name: 'Classes',
  data() {
    return {
      // 班级数据
      classList: [],

      // 筛选
      queryForm: {
        className: undefined,
      },

      // 分页
      paginate: {
        pageSize: 8, // 每页的数量
        pageNum: 1, // 第几页
        total: 0, // 总数
      },

      // 弹窗
      dialog: {
        visible: false,
        isEdit: false,
        form: {
          classId: undefined,
          className: undefined,
        },
      },
    }
  },

  created() {
    this.getListClass()
  },
  methods: {
    // 获取班级列表
    getListClass() {
      const { total, ...rest } = this.paginate
      listClass({ ...rest, ...this.queryForm }).then(res => {
        this.classList = res.data.rows
        this.paginate.total = res.data.count
      })
    },

    // 搜索功能
    handleQuery() {
      const hasInput = checkQueryInput(this.queryForm)
      if (!hasInput) return this.$message.warning("当前没有输入值，请至少输入一项数据!!")
      this.paginate.pageNum = 1
      this.getListClass()
    },

    // 节点重置
    rest() {
      restForm(this.$refs['queryFormRef'])
      // 回到第一页
      this.paginate.pageNum = 1
      this.getListClass()
    },

    // 分页
    handleCurrentPage() {
      this.getListClass()
    },

    // 打开添加弹窗
    handleAdd() {
      this.dialog.isEdit = false
      this.dialog.form = {
        className: undefined,
      }
      this.dialog.visible = true
    },

    // 打开编辑弹窗
    handleEdit(row) {
      this.dialog.isEdit = true
      this.dialog.form = { ...row }
      this.dialog.visible = true
    },

    // 保存（添加/编辑）
    handleSave() {
      this.$refs['dialogFormRef'].validate((valid) => {
        if (valid) {
          if (this.dialog.isEdit) {
            // 编辑班级
            editClass(this.dialog.form).then(res => {
              this.$message.success(res.msg)
              this.dialog.visible = false
              this.getListClass()
            })
          } else {
            // 添加班级
            addClass(this.dialog.form).then(res => {
              this.$message.success(res.msg)
              this.dialog.visible = false
              this.getListClass()
            })
          }
        }
      })
    },

    // 删除
    handleDelete(row) {
      this.$confirm(`确定删除班级【${row.className}】吗？`, "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delClass(row.classId).then((res) => {
          this.$message.success(res.msg)
          this.getListClass()
        })
      }).catch(() => {
        // 取消
      })
    }
  },
}
</script>

<style lang="scss" scoped></style>